Skip to content

fix(ai-conversations): Improve XML tag rendering in AI span details#112346

Merged
obostjancic merged 4 commits intomasterfrom
ognjenbostjancic/tet-2049-markdown-renderer-vs-xml-tags
Apr 8, 2026
Merged

fix(ai-conversations): Improve XML tag rendering in AI span details#112346
obostjancic merged 4 commits intomasterfrom
ognjenbostjancic/tet-2049-markdown-renderer-vs-xml-tags

Conversation

@obostjancic
Copy link
Copy Markdown
Member

@obostjancic obostjancic commented Apr 7, 2026

Improves how XML tags are rendered in the AI spans trace drawer:

  • Inline XML tags (mid-sentence) now render as italic markdown text instead of breaking into block elements
  • Block-level XML tags (on their own line) still render with a bordered sidebar
  • Nested XML tags are now rendered recursively instead of being stripped by the HTML sanitizer
  • Border color changed from purple to grey, thinned to 2px

Before:
CleanShot 2026-04-07 at 14 50 04@2x

After:
CleanShot 2026-04-07 at 14 49 34@2x

@linear-code
Copy link
Copy Markdown

linear-code bot commented Apr 7, 2026

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Apr 7, 2026
@obostjancic obostjancic force-pushed the ognjenbostjancic/tet-2049-markdown-renderer-vs-xml-tags branch from dfd2fdb to f20ffe1 Compare April 7, 2026 11:58
Add AIContentRenderer that auto-detects content type (JSON, Python
dicts, markdown, XML tags) and renders appropriately in the AI spans tab.

Inline XML tags render as italic markdown within text flow. Block-level
XML tags render with a grey bordered sidebar. Nested XML tags are handled
recursively. Includes raw/pretty toggle for markdown-with-xml content.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@obostjancic obostjancic changed the title fix(ai): Improve XML tag rendering in AI span details fix(ai-conversations): Improve XML tag rendering in AI span details Apr 7, 2026
@obostjancic obostjancic force-pushed the ognjenbostjancic/tet-2049-markdown-renderer-vs-xml-tags branch from f20ffe1 to 13eb77b Compare April 7, 2026 12:48
@obostjancic obostjancic marked this pull request as ready for review April 7, 2026 12:51
@obostjancic obostjancic requested a review from a team as a code owner April 7, 2026 12:51
@obostjancic obostjancic requested a review from a team April 7, 2026 12:55
Copy link
Copy Markdown
Contributor

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for both issues found in the latest run.

  • ✅ Fixed: Inline tags with nested XML produce broken markdown
    • Added recursive processing in preprocessInlineXmlTags to handle nested XML tags within inline tags, preventing markdown syntax from being split across segments.
  • ✅ Fixed: Computed isBlock property never used in renderer
    • Removed the unused isBlock property from ContentSegment type and parseXmlTagSegments function, eliminating dead code and unnecessary computation.

Create PR

Or push these changes by commenting:

@cursor push 568659ac64
Preview (568659ac64)
diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/aiContentDetection.spec.ts b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/aiContentDetection.spec.ts
--- a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/aiContentDetection.spec.ts
+++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/aiContentDetection.spec.ts
@@ -131,9 +131,7 @@
 describe('preprocessInlineXmlTags', () => {
   it('replaces inline XML tags with italic markdown', () => {
     const text = 'Before <thinking>inner thought</thinking> After';
-    expect(preprocessInlineXmlTags(text)).toBe(
-      'Before *thinking: inner thought* After'
-    );
+    expect(preprocessInlineXmlTags(text)).toBe('Before *thinking: inner thought* After');
   });
 
   it('leaves block-level tags at start of text untouched', () => {
@@ -158,30 +156,37 @@
     const text = 'before <tag>  spaced  </tag> after';
     expect(preprocessInlineXmlTags(text)).toBe('before *tag: spaced* after');
   });
+
+  it('recursively processes nested inline XML tags', () => {
+    const text = 'Text <outer>before <inner>nested</inner> after</outer> more';
+    expect(preprocessInlineXmlTags(text)).toBe(
+      'Text *outer: before *inner: nested* after* more'
+    );
+  });
 });
 
 describe('parseXmlTagSegments', () => {
-  it('marks inline XML tags with isBlock false', () => {
+  it('parses inline XML tags', () => {
     const text = 'Before <thinking>inner thought</thinking> After';
     const segments = parseXmlTagSegments(text);
     expect(segments).toEqual([
       {type: 'text', content: 'Before '},
-      {type: 'xml-tag', tagName: 'thinking', content: 'inner thought', isBlock: false},
+      {type: 'xml-tag', tagName: 'thinking', content: 'inner thought'},
       {type: 'text', content: ' After'},
     ]);
   });
 
-  it('marks tag at start of text as block', () => {
+  it('parses multiple tags', () => {
     const text = '<plan>step 1</plan> then <result>done</result>';
     const segments = parseXmlTagSegments(text);
     expect(segments).toEqual([
-      {type: 'xml-tag', tagName: 'plan', content: 'step 1', isBlock: true},
+      {type: 'xml-tag', tagName: 'plan', content: 'step 1'},
       {type: 'text', content: ' then '},
-      {type: 'xml-tag', tagName: 'result', content: 'done', isBlock: false},
+      {type: 'xml-tag', tagName: 'result', content: 'done'},
     ]);
   });
 
-  it('marks tag preceded by newline as block', () => {
+  it('parses tag preceded by newline', () => {
     const text = 'Some text\n<thinking>\nline1\nline2\n</thinking>';
     const segments = parseXmlTagSegments(text);
     expect(segments).toEqual([
@@ -190,7 +195,6 @@
         type: 'xml-tag',
         tagName: 'thinking',
         content: '\nline1\nline2\n',
-        isBlock: true,
       },
     ]);
   });
@@ -208,7 +212,7 @@
   it('handles tags with hyphens in names', () => {
     const text = '<my-tag>content</my-tag>';
     expect(parseXmlTagSegments(text)).toEqual([
-      {type: 'xml-tag', tagName: 'my-tag', content: 'content', isBlock: true},
+      {type: 'xml-tag', tagName: 'my-tag', content: 'content'},
     ]);
   });
 
@@ -219,9 +223,7 @@
       {
         type: 'xml-tag',
         tagName: 'bug_report',
-        content:
-          '\n<location>file.ts</location>\n<description>a bug</description>\n',
-        isBlock: true,
+        content: '\n<location>file.ts</location>\n<description>a bug</description>\n',
       },
     ]);
   });

diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/aiContentDetection.ts b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/aiContentDetection.ts
--- a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/aiContentDetection.ts
+++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/aiContentDetection.ts
@@ -10,7 +10,7 @@
 
 type ContentSegment =
   | {content: string; type: 'text'}
-  | {content: string; isBlock: boolean; tagName: string; type: 'xml-tag'};
+  | {content: string; tagName: string; type: 'xml-tag'};
 
 interface AIContentDetectionResult {
   type: AIContentType;
@@ -57,12 +57,10 @@
     if (match.index > lastIndex) {
       segments.push({type: 'text', content: text.slice(lastIndex, match.index)});
     }
-    const isBlock = match.index === 0 || /\n\s*$/.test(text.slice(0, match.index));
     segments.push({
       type: 'xml-tag',
       tagName: match[1]!,
       content: match[2]!,
-      isBlock,
     });
     lastIndex = match.index + match[0].length;
   }
@@ -82,7 +80,8 @@
     if (isBlock) {
       return match;
     }
-    return `*${tagName}: ${content.trim()}*`;
+    const processedContent = preprocessInlineXmlTags(content);
+    return `*${tagName}: ${processedContent.trim()}*`;
   });
 }

This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.

Strip nested XML tags from inline tag content to prevent broken
markdown with unmatched asterisks. Remove unused isBlock property from
parseXmlTagSegments since preprocessInlineXmlTags handles the distinction.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@obostjancic obostjancic force-pushed the ognjenbostjancic/tet-2049-markdown-renderer-vs-xml-tags branch from ecbb2ab to c32c82b Compare April 7, 2026 13:26
Copy link
Copy Markdown
Contributor

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 891d6f4. Configure here.

@obostjancic obostjancic merged commit f0da4f4 into master Apr 8, 2026
65 checks passed
@obostjancic obostjancic deleted the ognjenbostjancic/tet-2049-markdown-renderer-vs-xml-tags branch April 8, 2026 12:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants